---
title: "Place Items"
description: "Utilities for controlling how items are justified and aligned at the same time."
---

import plugin from 'tailwindcss/lib/plugins/placeItems'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Start

Use `place-items-start` to place grid items on the start of their grid areas on both axis:

```html emerald
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-start h-48">
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">1</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">2</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">3</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">4</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">5</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-start** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## End

Use `place-items-end` to place grid items on the end of their grid areas on both axis:

```html amber
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-end h-48">
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">1</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">2</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">3</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">4</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">5</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-end** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Center

Use `place-items-center` to place grid items on the center of their grid areas on both axis:

```html purple
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-center h-48">
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">1</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">2</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">3</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">4</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">5</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-center** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Stretch

Use `place-items-stretch` to stretch items along their grid areas on both axis:

```html lightBlue
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-stretch h-48">
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">1</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">2</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">3</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">4</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">5</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-stretch** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Responsive

To place items at a specific breakpoint, add a `{screen}:` prefix to any existing `place-items` utility. For example, use `md:place-items-center` to apply the `place-items-center` utility at only medium screen sizes and above.

```html
<div class="place-items-start md:place-items-center">
  <!-- ... -->
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Variants

<Variants plugin="placeItems" name="place-items" />

### Disabling

<Disabling plugin="placeItems" name="place-items" />
